<template>
  <view class="common my pos-r">
    <image class="pos-a t-0 l-0 wp-100 h-600 z-0" src="/static/images/bg.png" alt="" />
    <view class="wp-100 hp-100 bg-gry"></view>
    <view class="main">
      <!-- 用户信息区域 -->
      <view class="wp-100 hc-100 ofy-a">
        <view class="d-f ia-c ph-24 mt-20">
          <view class="mr-24" @tap="gotoProfile">
            <u-image width="90rpx" height="90rpx" shape="circle" :src="userInfo.avatarUrl || '/static/images/my/avatar.png'" mode="aspectFill"></u-image>
          </view>
          <view class="d-f fd-c" @tap="gotoProfile">
            <text class="fs-32 mr-20">{{ userInfo.nickName || '立即登录' }}</text>
            <text class="fs-24 mt-10 c-999">{{ userInfo.phoneNumber || '' }}</text>
          </view>
        </view>

        <!-- 数据统计区域 -->
        <view class="d-f jc-a mt-60 bg-whi br-24 mh-24 p-24">
          <view class="d-f fd-c ia-c jc-c w-200" @tap="gotoFootprint">
            <text class="fs-36 fw-600 mb-8 ta-c c-yel fs-48 lh-1">0</text>
            <text class="fs-24 c-333 mt-20 ta-c fs-28 lh-1">我的足迹</text>
          </view>
          <view class="d-f fd-c ia-c jc-c w-200" @tap="gotoCollection">
            <text class="fs-36 fw-600 mb-8 ta-c c-yel fs-48 lh-1">0</text>
            <text class="fs-24 c-333 mt-20 ta-c fs-28 lh-1">我的收藏</text>
          </view>
        </view>

        <!-- 买家专属区域 -->
        <view class="mt-30 mh-24 br-24 bgg-yel pv-32 ph-24">
          <text class="fs-28 c-333 lh-1 fw-7">买家专属</text>
          <view class="d-f jc-a mt-40">
            <view v-for="(item, index) in buyMenus" :key="index" class="d-f fd-c ia-c jc-c wp-20" @tap="handleMenuClick(item)">
              <view class="wp-100 h-68 fcc">
                <u-image width="30px" height="30px" :src="`/static/images/my/b${index + 1}.png`" mode="aspectFit"></u-image>
              </view>
              <text class="fs-24 c-333 mt-24 ta-c wp-100">{{ item.name }}</text>
            </view>
          </view>
        </view>

        <!-- 卖家专属区域 -->
        <view class="mt-30 mh-24 br-24 bgg-yel pv-32 ph-24">
          <text class="fs-28 c-333 lh-1 fw-7">卖家专属</text>
          <view class="d-f jc-a mt-40">
            <view v-for="(item, index) in sellMenus" :key="index" class="d-f fd-c ia-c jc-c wp-20" @tap="handleMenuClick(item)">
              <view class="wp-100 h-68 fcc">
                <u-image width="30px" height="30px" :src="`/static/images/my/b${index + 1}.png`" mode="aspectFit"></u-image>
              </view>
              <text class="fs-24 c-333 mt-24 ta-c wp-100">{{ item.name }}</text>
            </view>
          </view>
        </view>

        <!-- 其他功能区域 -->
        <view class="mt-30 mh-24 bg-whi br-24">
          <u-cell-group>
            <u-cell title="邀请好友" arrow-direction="right" @click="gotoInvite">
              <template #icon>
                <u-image width="40rpx" height="40rpx" src="/static/images/my/invite.png" mode="aspectFit"></u-image>
              </template>
            </u-cell>
            <u-cell title="实名认证" arrow-direction="right" @click="gotoAuth">
              <template #icon>
                <u-image width="40rpx" height="40rpx" src="/static/images/my/card.png" mode="aspectFit"></u-image>
              </template>
            </u-cell>
            <u-cell title="设置" arrow-direction="right" @click="gotoSetting">
              <template #icon>
                <u-image width="40rpx" height="40rpx" src="/static/images/my/setting.png" mode="aspectFit"></u-image>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: uni.getStorageSync('userInfo') || {},
      buyMenus: [{ name: '待付款' }, { name: '待发货' }, { name: '交易完成' }, { name: '已取消' }, { name: '我的出价' }],
      sellMenus: [{ name: '正出售' }, { name: '已下架' }, { name: '待审核' }, { name: '未通过' }, { name: '收到出价' }]
    };
  },
  onShow() {
    this.initData();
  },
  methods: {
    // 初始化数据
    initData() {
      // 从本地存储获取用户信息
      const storedUserInfo = uni.getStorageSync('userInfo');
      if (storedUserInfo) {
        const userInfo = typeof storedUserInfo === 'string' ? JSON.parse(storedUserInfo) : storedUserInfo;
        this.userInfo = { ...this.userInfo, ...userInfo };
      }
    },
    // 菜单点击事件
    handleMenuClick(item) {
      // 实际项目中根据不同菜单项执行不同操作
      console.log('点击了菜单项:', item.name);
    },
    // 跳转到足迹页面
    gotoFootprint() {
      console.log('跳转到足迹页面');
    },
    // 跳转到收藏页面
    gotoCollection() {
      console.log('跳转到收藏页面');
    },
    // 跳转到邀请好友
    gotoInvite() {
      console.log('跳转到邀请好友');
    },
    // 跳转到实名认证
    gotoAuth() {
      console.log('跳转到实名认证');
    },
    // 跳转到设置
    gotoSetting() {
      uni.navigateTo({ url: '/pages/my/setting' });
    },
    // 跳转到个人资料页面
    gotoProfile() {
      uni.navigateTo({ url: '/pages/my/profile' });
    }
  }
};
</script>

<style scoped lang="scss">
.common {
  .main {
    position: absolute;
    height: 100%;
    padding-top: 170rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    top: 0;
    left: 0;
    .bgg-yel {
      background: linear-gradient(0deg, #ffffff 0%, #fff9e9 100%);
    }
  }
}
</style>
